<template>
    <header class="ui-header">
        <div class="header-btn" @click="toggleEditMode">{{editMode?'完成':'编辑'}}</div>
    </header>

    <div class="header-holder"></div>

    <div class="ui-box">
        <div class="ui-bar ui-v-a" v-link="{name:'addAddress'}">
            新增收货地址
            <div class="ui-more"></div>
        </div>
    </div>

    <div v-if="list&&list.length>0" class="ui-box">
        <div v-for="val of list" class="address">
            <div class="slider ui-c-f" :style="{right:editMode?'60px':0}">

                <div class="deleteArea" @click="deleteAddress(val._id,$index)"></div>
                <div class="edit-address" @click="editAddress(val)"></div>
                <div class="address-body" @click="selectAddress(val)">
                    <div v-if="selectMode" class="checkbox" :data-check="selected._id==val._id?'true':'false'"></div>

                    <h1>{{val.receiver_name}}</h1>

                    <h2>{{val.phone}}</h2>

                    <p>{{val.city|parseCity}} {{val.place}}</p>
                </div>


            </div>

        </div>
    </div>
</template>

<script type="text/babel">
    import http from '../libs/http'
    import {orderService} from '../stores/order'

    export default{
        props: ['address'],
        data(){
            return {
                selected: {
                    _id: ''
                },
                list: [],
                editMode: false
            };
        },
        computed: {
            selectMode: function () {
                return this.$route.name == 'selectAddress';
            }
        },
        attached: function () {
            var self = this;

            if (this.selectMode)
                this.selected = orderService.pure.address;

            http.get({
                url: api + 'user/address',
                jsonp: true
            }).then(function (obj) {
                if (obj.code == 0) {
                    self.list = obj.data;
                }
            });
        },
        methods: {
            editAddress: function (val) {
                this.$route.router.go({
                    name: 'editAddress',
                    params: {address: encodeURIComponent(JSON.stringify(val))}
                });
            },

            toggleEditMode: function () {
                this.editMode = !this.editMode;
            },

            deleteAddress: function (_id, i) {
                var self = this;

                http.delete({
                    url: api + 'user/address',
                    jsonp: true,
                    data: {
                        _id: _id
                    }
                }).then(function (obj) {
                    if (obj.code == 0) {
                        self.list.splice(i, 1);
                        self.$dispatch('toast', '删除成功');
                    } else if (obj.msg)
                        self.$dispatch('toast', obj.msg);
                });
            },
            selectAddress: function (address) {
                if (this.selectMode) {
                    orderService.changeAddress(address);
                    history.back();
                }
            }

        }
    }
</script>

<style scoped>
    .header-btn {
        float: right;
        height: 20px;
        line-height: 20px;
        padding: 8px;
        color: white;
        font-size: 14px;
    }

    .header-holder {
        height: 36px;
    }

    .address {
        overflow: hidden;
        height: 90px;
        padding: 0 8px;
        border-bottom: solid 1px #f0f0f0;
        background: transparent;
        transition: background 0.3s;
        -webkit-transition: background 0.3s;
    }

    .address:last-child {
        border-bottom: none;
    }

    .address .slider {
        position: relative;
        right: 0;
        transition: right 0.3s;
        -webkit-transition: right 0.3s;
    }

    .address-body {
        height: 90px;
        float: left;
        width: 80%;
    }

    .deleteArea {
        width: 60px;
        height: 90px;
        text-align: center;
        position: relative;
        float: right;
        right: -68px;
        background: url("../../static/img/iconfont-trash.png") red no-repeat center;
        background-size: 32px;
    }

    .address h1 {
        display: inline-block;
        font-size: 16px;
        font-weight: lighter;
        padding: 8px 0;
    }

    .address h2 {
        display: inline-block;
        font-size: 12px;
        font-weight: lighter;
    }

    .address h2::after {
        content: '';
        display: block;
    }

    .address p {
        font-size: 12px;
        color: #888888;
        max-height: 3.6em;
        line-height: 1.2em;
    }

    .address[data-select="true"]:active {
        background: #f9e043;
        color: white;
    }

    .address[data-select="true"]:active p {
        color: white;
    }

    .address .edit-address {
        width: 60px;
        position: absolute;
        height: 90px;
        right: 0;
        background: url(../../static/img/ic_edit.png) no-repeat center;
        background-size: 18px;
    }

    .checkbox {
        width: 16px;
        float: left;
        height: 16px;
        background: url("../../static/img/spit_Checkbox.png") no-repeat;
        background-size: 16px;
        display: inline-block;
        vertical-align: middle;
        margin-top: 30px;
        padding: 0 8px;
    }

    .checkbox[data-check="false"] {
        background-position: 0 0;
    }

    .checkbox[data-check="true"] {
        background-position: 0 -16px;
    }

</style>